import { Tooltip } from 'antd';
import React from 'react';

const LeftDivs = (props) => {
  return (
    <div style={{ width: 120, userSelect: 'none' }} id={'leftModals'}>
      <div
        data-type="start"
        onMouseDown={(e) => props.startDrag(e, '开始')}
        style={{
          width: 80,
          height: 48,
          marginBottom: 15
        }}
      >
        <Tooltip title={'进入会话模块用来设置用户输入什么问题时会触发该多轮对话'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + "/ggeditor/flow/start.png"} width="80" height="48" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="centerNode"
        onMouseDown={(e) => props.startDrag(e, '收集词槽', '#89C997', 'rgba(229,255,216,1)', 'slot')}
        style={{
          width: 80,
          height: 48,
          marginBottom: 15
        }}
      >
        <Tooltip title={'收集词槽模块用来设置让机器人主动询问并收集词槽信息。比如询问用户的姓名、手机号、出发城市、出发时间等'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/flow/collect.png'} width="80" height="48" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="centerNode"
        onMouseDown={(e) => props.startDrag(e, '信息确认', '#FF6975', 'rgba(255,237,238,1)', 'confirm')}
        style={{
          width: 80,
          height: 48,
          marginBottom: 15
        }}
      >
        <Tooltip title={'信息确认模块用来和用户确认某些已经收集到或查询到的信息（比如订单信息），用户确认后跳出该模块继续进行后续的流程'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/flow/information.png'} width="80" height="48" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="centerNode"
        onMouseDown={(e) => props.startDrag(e, '内容筛选', '#44E1D6', 'rgba(232,255,251,1)', 'filter')}
        style={{
          width: 80,
          height: 48,
          marginBottom: 15
        }}
      >
        <Tooltip title={'内容筛选模块用来让用户从系统查询得到的多条数据中（比如机票或者商品等），进行多条件、多维度的筛选，最终选择一条自己需要的数据'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/flow/screen.png'} width="80" height="48" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="caseNode"
        onMouseDown={(e) => props.startDrag(e, '触发条件')}
        style={{
          width: 80,
          height: 48,
          marginBottom: 15
        }}
      >
        <Tooltip title={'触发条件模块用来设置，当会话满足了设定的条件时则进入该模块下面的处理流程。'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/flow/trigger.png'} width="80" height="48" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="action"
        onMouseDown={(e) => props.startDrag(e, '动作')}
        style={{
          width: 72,
          height: 72,
          marginBottom: 15
        }}
      >
        <Tooltip title={'动作模块用来设置，当进行到该模块时自动执行所设定的动作，包括回复用户、调用API接口和清空词槽值'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/flow/action.png'} width="72" height="72" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="endNode"
        onMouseDown={(e) => props.startDrag(e, '结束')}
        style={{
          width: 72,
          height: 72,
          marginBottom: 15
        }}
      >
        <Tooltip title={'结束模块代表会话进行到该模块时即结束当前多轮对话，每个流程分支的终结点都必须为结束模块'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/flow/end.png'} width="80" height="48" draggable={false} />
        </Tooltip>
      </div>
    </div>
  )
}
export default LeftDivs
